<template>
	<view class="feeRecord">
		<view class="head">
			<picker @change="bindType" :value="index" :range="typeList" range-key="name">
				<view class="" v-if="typeState">
					缴费类型
				</view>
				<view v-else>{{ typeList[index]['name'] }}</view>
			</picker>
		</view>
		<!-- 记录列表 -->
		<view class="list" v-if="feeState">
			<view class="li" v-for="(item,index) in feeList" :key="index">
				<view class="li_head">
					{{item.type}}
				</view>
				<view class="line">
					<text>房号</text>
					<text>{{item.houseid}}</text>
				</view>
				<view class="line">
					<text>时间</text>
					<text>{{item.begindate}}至{{item.enddate}}</text>
				</view>
				<view class="line">
					<text>账单金额</text>
					<text>{{item.price}}</text>
				</view>
				<view class="line">
					<text>缴费时间</text>
					<text>{{item.addtime}}</text>
				</view>
				<view class="line">
					<text>付款方式</text>
					<text>微信支付</text>
				</view>
			</view>
			<view class="state" v-if="state">
				{{ stateText }}
			</view>
		</view>
		<!-- 无记录 -->
		<view class="feelist" v-else>
			没用缴费记录
		</view>
	</view>
</template>

<script>
	import {
		Fee
	} from "../../static/api/apis.js"
	export default {
		data() {
			return {
				typeList: [],
				feeList: [],
				page: 1,
				psize: 4,
				state: false,
				stateText: "下拉加载更多",
				counts: "",
				feeState: true,
				index: 0,
				typeState: true,
			}
		},
		// 上拉刷新
		onPullDownRefresh() {
			this.state = false
			this.feeList = []
			this.page = 1
			this.getFeeList()
		},
		// 下拉加载
		onReachBottom() {
			if (this.feeList.length < this.counts) {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.page++
				this.getFeeList()
			} else if (this.feeList.length === this.counts) {
				this.stateText = "已经到底了"
			}
		},
		onReady() {
			document.querySelector('.uni-page-head__title').style.fontWeight = 'normal'
		},
		onLoad() {
			this.getFeeType()
			this.getFeeList()
		},
		methods: {
			// 选择框变化
			bindType(e) {
				console.log(e.target.value)
				this.index = e.target.value
				this.typeState = false
			},
			// 获取缴费列表
			async getFeeList() {
				const res = await Fee.feeList({
					page: this.page,
					psize: this.psize,
					state: 1,
				})
				// 总数
				this.counts = res.data.counts
				if (this.counts > 0) {
					this.feeState = true
					this.$settime(() => {
						// 有数据
						if (res.errCode === 10000 && res.data.list.length > 0) {
							this.feeList = this.feeList.concat(res.data.list)
							// 数据少于一页或只有一页
							if (res.data.pageCounts === 1) {
								this.stateText = "已经到底了"
							} else {
								this.stateText = "下拉加载更多"
							}
						}
						// 没数据
						else {
							this.stateText = "已经到底了"
						}
						this.state = true
						uni.stopPullDownRefresh()
						uni.hideLoading()
						console.log('缴费列表', this.feeList)
					})
				} else {
					this.feeState = false
				}
			},
			// 缴费类型
			async getFeeType() {
				const res = await Fee.feeTypeList()
				if (res.errCode === 10000) {
					this.typeList = res.data.list
				}
				console.log("账单类型", this.typeList)
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f0f0f0;
	}

	@import url(../../static/css/feeRecord.less);
</style>
